<template>
    <el-main>
      <h1>电子图书分类管理</h1>
      <el-rate class="ml-1" />
      <el-row>
        <el-form :model="like">
          <el-form-item
              label="名称"
          >
            <el-input
                v-model="like.name"
                type="text"
                autocomplete="off"
            />
          </el-form-item>

        </el-form>
        <el-button type="primary" @click="submitLike(like.name)">查询</el-button>
        <el-button type="primary" @click="add()">增加</el-button>
      </el-row>


      <el-table :data="tableData"
                style="width: 100%"
                row-key="id"
                border
                lazy
                :load="load"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column label="ID" width="200" prop="id">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="名称" width="180" prop="name">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="顺序" width="180" prop="sort">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.sort }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="父分类" width="200">
          <template #default="scope" prop="parent">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.parent }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >Edit</el-button
            >
            <el-popconfirm
                confirm-button-text="Yes"
                cancel-button-text="No"
                title="确定要删除吗?"
                @confirm="confirmEvent(scope.row.id)"
            >
              <template #reference>
                <el-button
                    size="small"
                    type="danger"
                >Delete</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          v-model:current-page="currentPage3"
          v-model:page-size="pageSize3"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="prev, pager, next, jumper,total,->,consists of sizes"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
      <el-dialog v-model="dialogFormVisible" title="电子书分类表单">
        <el-form :model="form" :rules="rules" ref="ruleFormRef">
          <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="顺序" :label-width="formLabelWidth">
            <el-input v-model.number="form.sort" autocomplete="off" />
          </el-form-item>
          <el-form-item label="父分类" :label-width="formLabelWidth">
            <el-select v-model="form.parent"  placeholder="请选择父文档">
              <el-option
                  label="无"
                  :value="0"
              />
              <el-option
                  v-for="item in tableData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  :disabled="form.id===item.id"
              />
            </el-select>
          </el-form-item>

        </el-form>
        <template #footer>
        <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        <el-button type="primary" @click="update(ruleFormRef)">
          更新
        </el-button>
         </span>
        </template>
      </el-dialog>
    </el-main>

</template>
<script lang="ts" setup>
import { Timer } from '@element-plus/icons-vue'
import {h, onMounted, ref,reactive} from "vue";
import axios from "axios";
import {ElNotification, FormInstance, FormRules} from "element-plus";
const tableData: Category[] = ref([])
const currentPage3 = ref(1)
const pageSize3 = ref(10)
const small = ref(false)
const background = ref(true)
const disabled = ref(false)
const total=ref(10)
const dialogFormVisible = ref(false)
const ruleFormRef = ref<FormInstance>()
const formLabelWidth = '140px'
const load = (
    row: Category,
    treeNode: unknown,
    resolve: (date: Category[]) => void
) => {
  let arr:any=[]
  axios({
    method: 'get',
    url: '/category/listChildren',
    // 传递参数
    params: {
      "id":row.id
    },
    // 设置请求头信息
    headers: {

    }
  }).then((response) => {
    if (response.data.data.length!==0){
      open1("teal",response.data.message)
      arr=response.data.data
    }else {
      open1("red",response.data.message)
    }
  })
  setTimeout(() => {
    resolve(arr)
  }, 1000)
}

const like = reactive({
  name: '',
})
const form = reactive({
  id:0,
  parent:0,
  name: '',
  sort:0,
})
interface Category {
  id:number
  parent: number
  name: string
  sort:number
  hasChildren?: boolean
  children?: Category[]
}
const rules = reactive<FormRules>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
  ],
})
const handleQuery=(params:any)=>{
  axios({
    method: 'get',
    url: '/category/list',
    // 传递参数
    params: {
      "name": params.name,
      "pageNum":params.pageNum,
      "pageSize":params.pageSize,
    },
    // 设置请求头信息
    headers: {

    }
  }).then((response) => {
    tableData.value=response.data.data.data
    for (let i = 0; i < tableData.value.length; i++) {
      let a= tableData.value[i]
      a["hasChildren"]=true
    }
    total.value=response.data.data.total
  })
}

const confirmEvent=(id:number)=>{
  axios({
    method: 'delete',
    url: '/category/delete/'+id
  }).then((response) => {
    if (response.data.data!==0){
      handleQuery({
        "name":"",
        "pageNum":currentPage3.value,
        "pageSize":pageSize3.value
      })
      open1("teal",response.data.message)
    }else {
      open1("red",response.data.message)
    }
  })
}

const add=()=>{
  dialogFormVisible.value=true
  form.id=0
  form.parent=0
  form.name=''
  form.sort=0
}

const submitLike=(name:string)=>{
  handleQuery({
    "name":name,
    "pageNum":currentPage3.value,
    "pageSize":pageSize3.value
  })
}

const update=async (formEl: FormInstance | undefined)=>{
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios({
        method: 'post',
        url: '/category/update',
        // 传递参数
        data: {
          id:form.id,
          parent: form.parent,
          name: form.name,
          sort:form.sort,
        },
        // 设置请求头信息
        headers: {
          "Content-Type":"application/json"
        }
      }).then((response) => {
        if (response.data.data!==0){
          dialogFormVisible.value = false
          handleQuery({
            "name":"",
            "pageNum":currentPage3.value,
            "pageSize":pageSize3.value
          })
          open1("teal",response.data.message)
        }else {
          open1("red",response.data.message)
        }
      })
    }
  })

}
onMounted(()=>{
  handleQuery({
    "name":"",
    "pageNum":currentPage3.value,
    "pageSize":pageSize3.value
  })
})
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  currentPage3.value=val
  handleQuery({
    "name":"",
    "pageNum":currentPage3.value,
    "pageSize":pageSize3.value
  })

}
const handleEdit = (index: number, row: Category) => {
  dialogFormVisible.value=true
  form.id=row.id
  form.parent=row.parent
  form.name=row.name
  form.sort=row.sort
}
const open1 = (color:string,msg:string) => {
  ElNotification({
    title: '消息',
    message: h('i', { style: 'color: '+color }, msg),
    duration:3000,
  })
}
</script>
<style scoped>

</style>

